var outDiv = $("#d3");
var inDiv = $("#d7");
var leftbtn = $("#left");
var rightbtn = $("#right");
var left = 0,timeOut;
var index = 0, w = 960;
var timeId = setInterval(autoscroll, 30);
function autoscroll() {
	left -= 10 ;
	$("#d7").css("left", "left + 'px'");
	if (left % w ==0) {
		index++;
		// clearInterval() 方法可取消由 setInterval() 设置的 timeout。
		// clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值
		clearInterval(timerId);
		// setTimeout() 方法用于在指定的毫秒数后
		// 调用函数或计算表达式
		timerOut = setTimeout( function	() {
			timerId = setInterval(
				autoscroll, 30);
		},2000);
		if (left == -w * 4) {
			left = 0;
			$("#d7").css("left", "left + 'px'");
			index = 0;
		};
		changeDot();
	};
}
$("#d3").onmouseover(function () {
	clearInterval(timerId);
	clearTimeout(timerOut);
})
$("#d3").onmouseout(function () {
	timerId = setInterval(autoscroll,30);
})
$("#left").onclick(function () {
	if ($("#d7").offsetLeft % w == 0){
		index--;
	}
	if (index == -1){
		index = 3;
	}
	left = -w * index;
	$("#d7").css("left", "left + 'px'");
	changeDot();
})
rightbtn.onclick = ronclick;
function ronclick() {
	index++;
	if (index == 4) {
		index = 0;
	}
	left = -w * index;
	$("#d7").css("left", "left + 'px'");
	changeDot();
}

var spanArr = document.querySelectorAll("#out span");
function changeDot() {
	[].slice.call(spanArr).forEach(
		function(ele){
			ele.className = "";
		});
		spanArr[index].className = "gray";
}
for (var i = 0; i < spanArr.length; i++) {
	spanArr[i].index = i;
	spanArr[i].onclick = function (){
		index = this.index;
		left = -w * index;
		$("#d7").css("left", "left + 'px'");
		changeDot();
	};
};